{extend name="layout/layout" /}

{block name="pagecss"}
<style>
    .table-scrollable p {
        margin-top: 20px !important;
    }
</style>
{/block}

{block name="content"}
<div class="row">
    <div class="col-md-12">
        <div class="tabbable-custom nav-justified">
            <ul class="nav nav-tabs nav-justified">
                <li class="active">
                    <a href="#tab_0" data-toggle="tab" aria-expanded="true" class=""> 考试 </a>
                </li>
                <li>
                    <a href="#tab_1" data-toggle="tab" aria-expanded="false" class=""> 成绩 </a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="tab_0">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="">
                                <h3 class="text-center exam-title"> {$info.name} </h3>
                                <div class="table-scrollable">
                                    <table class="table table-striped table-bordered table-advance table-hover">
                                        <tbody>
                                        <tr>
                                            <td width="33%">
                                                <label class="control-label"> 总题数 </label>
                                                <p class=""><b> {$info.totalExams} </b></p>
                                            </td>
                                            <td width="34%">
                                                <label class="control-label"> 总分数 </label>
                                                <p class=""><b> {$info.totalScore} </b></p>
                                            </td>
                                            <td width="33%">
                                                <label class="control-label"> 及格分 </label>
                                                <p class=""><b> {$info.passingGrade} </b></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="control-label"> 考试时长 </label>
                                                <p class=""><b> {$info.examTime} </b> 分钟</p>
                                            </td>
                                            <td>
                                                <label class="control-label"> 考试时间 </label>
                                                <p class=""><b> {$info.startTime} </b> 至 <b> {$info.endTime} </b></p>
                                            </td>
                                            <td>
                                                <label class="control-label"> 考试说明 </label>
                                                <p class=""> {$info.explain} </p>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="">
                                <h3> 题目 </h3>
                                <div class="form-body">
                                    {foreach name="info.examquestions" item="examquestions" key="examKey"}
                                    <div class="form-group">
                                        {php}
                                        $options = json_decode($examquestions['option'], true);
                                        switch($examquestions['type']){
                                            case 1: $type = '单选题'; break;
                                            case 2: $type = '多选题'; break;
                                            case 3: $type = '判断题'; break;
                                            default: break;
                                        }
                                        {/php}
                                        <label>{$examquestions.number}、{$examquestions.subject} 【{$type}，{$examquestions.score}分】</label>
                                        <div class="mt-radio-list">
                                            {volist name="options" id="option"}
                                                <label class="mt-radio mt-radio-outline">
                                                    {$option.option_NO}、{$option.option_value}
                                                    <input type="radio" disabled>
                                                    <span></span>
                                                </label>
                                            {/volist}
                                        </div>
                                        {php}$examquestions['correctAnswer'] = str_replace(',', '、', $examquestions['correctAnswer']);{/php}
                                        <p>正确答案：{$examquestions.correctAnswer}</p>
                                    </div>
                                    {/foreach}
                                </div>
                            </div>

                            <input type="hidden" name="examId" value="{$info.id}">
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="tab_1">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="">
                                <h3 class="text-center exam-title"> {$info.name} </h3>
                                <div class="table-scrollable">
                                    <table class="table table-striped table-bordered table-advance table-hover">
                                        <tbody>
                                        <tr>
                                            <td width="25%">
                                                <label class="control-label"> 参与人数 </label>
                                                <p class=""><b> {$info.totalJoins} </b></p>
                                            </td>
                                            <td width="25%">
                                                <label class="control-label"> 通过人数 </label>
                                                <p class=""><b> {$info.totalPass} </b></p>
                                            </td>
                                            <td width="25%">
                                                <label class="control-label"> 未通过人数 </label>
                                                <p class=""><b> {$info.totalJoins - $info.totalPass} </b></p>
                                            </td>
                                            <td width="25%">
                                                <label class="control-label"> 平均分 </label>
                                                <p class=""><b> {$info.average} </b></p>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="">
                                <form action="" class="form-horizontal" name="ajaxForm">
                                    <div class="">
                                        <table id="joinexam-datatable" class="table table-bordered table-hover dataTable">
                                            <thead>
                                                <th>排名</th>
                                                <th>参考人</th>
                                                <th>考试用时（分钟）</th>
                                                <th>分数</th>
                                                <th>操作</th>
                                            </thead>
                                        </table>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情 模态框 -->
<div class="modal fade" id="view-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:1000px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">考试成绩</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="joinexamDatalist_url" value="{:url('admin/'.strtolower($model).'/joinexamlist')}">
<input type="hidden" class="viewJoinexam_url" value="{:url('admin/'.strtolower($model).'/viewjoinexam')}">
<!--<input type="hidden" class="viewExamresults_url" value="{:url('admin/'.strtolower($model).'/viewexamresults')}">-->
{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/pages/js/joinexam.js" type="text/javascript"></script>
{/block}